<!-- 模板 -->
<template>
  <div class="banner">
      <div class=" box">
          <div class="btn">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="add">添加</el-button>
          </div>
          <el-card>
            <el-table :data="tableData" border style="width: 100%" >
            <el-table-column type="index" label="序号" align="center"> </el-table-column>
            <el-table-column
            label="图片"
            align="center"
          >
            <template slot-scope="scope">
              <el-image  style="width: 80px;" :src="scope.row.picUrl"  :preview-src-list="[scope.row.picUrl]"> </el-image>
            </template>
          </el-table-column>
            <el-table-column prop="jumpUrl" label="跳转位置" align="center" >
              <template slot-scope="scope">
                  {{scope.row.jumpUrl ==1?'具体量表':scope.row.jumpUrl ==2?'全部量表'
                  :scope.row.jumpUrl ==3?'量表分类':scope.row.jumpUrl ==4?'资讯分类':scope.row.jumpUrl ==5?'资讯文章':scope.row.jumpUrl ==6?'老师列表'
                  :scope.row.jumpUrl ==7?'具体老师':scope.row.jumpUrl ==8?'课程列表':scope.row.jumpUrl ==9?'具体课程':scope.row.jumpUrl ==10?'团体测量咨询':''}}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="明细" align="center" > </el-table-column>
            <el-table-column prop="status" label="状态" align="center" >
              <template slot-scope="scope">
                  {{scope.row.status ==1?'显示':"不显示"}}
              </template>
            </el-table-column>

            <el-table-column  label="操作" align="center" >
                <template slot-scope="scope">
                    <el-button @click="handleUpdateClick(scope.row)" type="primary" icon="el-icon-edit" size="small" plain>修 改</el-button>
                    <el-button @click="handleDeleteClick(scope.row)" type="danger" size="small" icon="el-icon-delete" >删除</el-button>
                </template>
            </el-table-column>
          </el-table>
        </el-card>
         <pagination
        v-show="newsTotal >0"
        :total="newsTotal"
        :page.sync="params.pageNum"
        :limit.sync="params.pageSize"
        @pagination="getList"
        />
      </div>
      <!-- 添加弹窗 -->
      <el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="35%"
  :before-close="handleClose">
<el-form :label-position="labelPosition" label-width="120px" :model="form" :rules="rules" ref="form">
            <el-form-item label="大图" prop="picUrl">
                <el-upload
                :headers='headers'
                class="avatar-uploader"
                :action="upImage+'/table/upload'"
                :on-success="handleAvatarSuccess"
                :show-file-list="false"
                >
                <img v-if="form.picUrl" :src="form.picUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="跳转位置" prop="jumpUrl">
                <el-select v-model="form.jumpUrl" placeholder="请选择"  @change="changePlace">
                    <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="具体内容" prop="content" v-if="show == 1">
                <el-select v-model="form.jumpId" placeholder="请选择" filterable @change="changePlace1">
                    <el-option
                    v-for="item in options2"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="具体内容" prop="content" v-if="show == 2">
                <el-select v-model="form.jumpId" placeholder="请选择" filterable @change="changePlace2">
                    <el-option
                    v-for="item in options2"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="form.status" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="明细" prop="name" :disabled="true">
                <el-input v-model="form.name" ></el-input>
            </el-form-item>
        </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import { getBannerList,getBannerAdd, getBannerUpdate,getBannerDes,geBannertDet} from "@/api/home/index";
import { getList,getDsc,getclassifyList} from "@/api/information/index";
import { getCourseList,} from "@/api/certificate/index";
import { getClassifiedList } from "@/api/classified/classified";
import { getTeacherList,} from "@/api/teacher/index";
import { getList1, } from "@/api/table/table";
import { getToken } from "@/utils/auth";

export default {
  name: '',
  data () {
    return {
        tableData:[],
        dialogVisible:false,
        loading:false,
        title:"",
        labelPosition: 'right',
        headers: { Authorization: "Bearer " + getToken() },
        upImage: process.env.VUE_APP_BASE_API,
        form:{
          tyep:1,
          jumpId:undefined,
          name:'',
        },
        rules:{
            picUrl: [
            { required: true, message: "大图不能为空", trigger: "blur" }
          ],
          jumpUrl: [
            { required: true, message: '请选择跳转位置', trigger: 'change' }
          ],
        },
         options: [{
          value: 1,
          label: '显示',
        }, {
          value: 0,
          label: '不显示'
        }],
        options1:[{
          value: 1,
          label: '具体量表'
        }, {
          value: 2,
          label: '全部量表'
        },{
          value: 4,
          label: '资讯分类'
        },{
          value: 5,
          label: '文章'
        }, {
          value: 3,
          label: '量表分类'
        }, {
          value: 6,
          label: '老师列表'
        }, {
          value: 7,
          label: '具体老师'
        }, 
        {
          value: 8,
          label: '课程列表'
        },
        {
          value: 9,
          label: '具体课程详情'
        },
        {
          value: 10,
          label: '团体测量咨询'
        },],
        options2:[],
        show:0,
        params: {
            pageNum: 1,
            pageSize: 10,
        },
        newsTotal:0,
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    // 删除
    handleDeleteClick(row){
      const id = row.id;
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return geBannertDet(id);
        })
        .then(() => {
          this.getList();
          this.$message.success('删除成功')
        })
        .catch(function() {});
    },
    // 修改
    handleUpdateClick(row){
      // console.log(row);
      this.title = '修改'
      this.form = row
      this.form.jumpId = Number(row.jumpId)
      this.dialogVisible = true
       if(row.jumpUrl == 5){
        this.show = 1
        getList().then(res => {
          this.options2 = res.rows
          // console.log(this.options2);
      });
      }else if(row.jumpUrl == 1){
        this.show = 2
        getList1().then(res => {
            if(res.code == 200){
                this.options2 = res.rows
            }
        });
      }else if(row.jumpUrl == 2){
        this.show = 0
        // this.form.jumpId = ''
      }else if(row.jumpUrl == 4){
          this.show = 1
        getclassifyList().then(res => {
        // console.log(res);
        if(res.code == 200){
            this.options2 = res.rows
        }
      });
      }else if(row.jumpUrl == 3){
        this.show = 2
        getClassifiedList().then(res => {
            if(res.code == 200){
                this.options2 = res.rows
            }
        });
      }else if(row.jumpUrl == 5){
        this.show = 0
        // this.form.jumpId = ''
      }else if(row.jumpUrl == 6){
        this.show = 0
        // this.form.jumpId = ''
      }else if(row.jumpUrl == 7){
        this.show = 2
        getTeacherList().then(res => {
            if(res.code == 200){
                this.options2 = res.rows
                // console.log(res.rows);
            }
        });
      }else if(val == 8){
        this.show = 0
        this.form.jumpId = ''
      }else if(val == 9){
        this.show = 2
        getCourseList().then(res => {
            if(res.code == 200){
                this.options2 = res.rows
                // console.log(res.rows);
            }
        });
      }else if(val == 10){
        this.show = 0
        this.form.jumpId = ''
      }
      //  if(row.jumpUrl == 5){
      //   this.show = 1
      //   getList().then(res => {
      //     this.options2 = res.rows
      //     // console.log(this.options2);
      // });
      // }else if(row.jumpUrl == 1){
      //   this.show = 2
      //   getList1().then(res => {
      //       if(res.code == 200){
      //           this.options2 = res.rows
      //           // console.log(this.options2);
      //           // this.form.name = this.options2.name
      //       }
      //   });
      // }else if(row.jumpUrl == 3){
      //   this.show = 2
      //   getClassifiedList().then(res => {
      //       if(res.code == 200){
      //           this.options2 = res.rows
      //       }
      //   });
      // }else if(row.jumpUrl == 7){
      //   this.show = 2
      //   getTeacherList().then(res => {
      //       if(res.code == 200){
      //           this.options2 = res.rows
      //           // console.log(res.rows);
      //       }
      //   });
      // }
    },
     // 获取所有
    getList() {
      this.loading = true;
      let a = []
      this.tableData = []
      getBannerList(this.params).then(res => {
        // console.log(res);
        a = res.rows
        for (let i = 0; i< a.length; i++) {
         if(a[i].type == 1){
           this.tableData.push(a[i])
         }
        }
        // this.tableData = res.rows;
        this.newsTotal = this.tableData.length;
        this.loading = false;
      });
    },
    onSubmit(){
      // console.log(this.form);
        this.$refs["form"].validate(valid => {
          if (this.form.id != undefined) {
                  getBannerUpdate(this.form).then(res=>{
                      if(res.code == 200){
                          this.$message.success('编辑成功')
                          this.dialogVisible = false
                          this.getList()
                      }
                  })
                } else if (valid) {
                  getBannerAdd(this.form).then(res=>{
                      if(res.code == 200){
                          this.$message.success('新增成功')
                          this.dialogVisible = false
                          this.getList()
                      }
                  })
                } 
      });
    },
    changePlace1(val){
      getDsc(val).then(res => {
          this.form.name = res.data.title 
      });
    },
    changePlace2(val){
      for (let i = 0; i < this.options2.length; i++) {
        if(val == this.options2[i].id){
          this.form.name = this.options2[i].name
        }
        
      }
    },
    changePlace(val){
      // console.log(val);
      this.form.jumpId = ''
      this.form.name = ''
      if(val == 5){
        this.show = 1
        getList().then(res => {
          this.options2 = res.rows
          // console.log(this.options2);
      });
      }else if(val == 1){
        this.show = 2
        getList1().then(res => {
            if(res.code == 200){
                this.options2 = res.rows
            }
        });
      }else if(val == 2){
        this.show = 0
        this.form.jumpId = ''
      }else if(val == 4){
        this.show = 1
        getclassifyList().then(res => {
        // console.log(res);
        if(res.code == 200){
                this.options2 = res.rows
            }
      });
      }else if(val == 3){
        this.show = 2
        getClassifiedList().then(res => {
            if(res.code == 200){
                this.options2 = res.rows
            }
        });
      }else if(val == 5){
        this.show = 0
        this.form.jumpId = ''
      }else if(val == 6){
        this.show = 0
        this.form.jumpId = ''
      }else if(val == 7){
        this.show = 2
        getTeacherList().then(res => {
            if(res.code == 200){
                this.options2 = res.rows
                // console.log(res.rows);
            }
        });
      }else if(val == 8){
        this.show = 0
        this.form.jumpId = ''
      }else if(val == 9){
        this.show = 2
        getCourseList().then(res => {
            if(res.code == 200){
                this.options2 = res.rows
                // console.log(res.rows);
            }
        });
      }else if(val == 10){
        this.show = 0
        this.form.jumpId = ''
      }
    },
      handleAvatarSuccess(res, file) {
      // console.log(URL.createObjectURL(file.raw));
      // this.form.picUrl = res.data
      this.form.picUrl ='https://9001rzsxy.oss-cn-beijing.aliyuncs.com'+ res.data
        if(res.code ==200){
         this.$message.success("上传成功");
        }
    },
      handleClose(){
          this.dialogVisible = false
      },
      add(){
          this.title = '添加'
          this.form = {
                picUrl:'',
                status:this.options[0].value,
                name:'',
                type:1
            }
          this.dialogVisible = true
      },
  },
  created () {
    this.getList()
  },
  mounted () {}
}
</script>

<style rel="stylesheet/scss" lang="scss">
.box{
    margin: 10px;
    .btn{
        margin: 10px;
    }
}
.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}

</style>
